import React, { Component } from 'react'
import "./index.scss"
import * as echarts from "echarts"
import {Row,Col} from "antd"
import { request } from '../../api';
export default class UserFenxi extends Component {

    componentDidMount(){
        var chartDom = document.getElementById('box1');
        var myChart = echarts.init(chartDom);
        var option;
        
        option = {
            xAxis: {
                type: 'category',
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期七']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }]
        };
        
        option && myChart.setOption(option);
        this.getUserDate()
    }

    getUserDate=()=>{
    
        request.getuserlist()
            .then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.setState({
                        list: res.result
                    })
                    this.initUserChart(this.state.list)
                }
            })
    }

    initUserChart=(list)=>{
        var chartDom = document.getElementById('box2');
        var myChart = echarts.init(chartDom);
      var  option = {
            title: {
                text: '南丁格尔玫瑰图',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                left: 'center',
                top: 'bottom',
                data: ['rose1', 'rose2', 'rose3']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
           
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [20, 140],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 5
                    },
                    data: [
                        {value: list.filter(item=>item.role==0).length, name: '普通用户'},
                        {value: list.filter(item=>item.role==1).length, name: '管理员'},
                        {value: list.filter(item=>item.role==2).length, name: '超级管理员'},
                        // {value: 484, name: '联盟广告'},
                        // {value: 300, name: '视频广告'}
                    ],
                }
            ]
        };
        myChart.setOption(option);
    }

    render() {
        return (
            <div>
                <h2 style={{paddingBottom:'10px'}}>超市用户分析</h2>
                <Row>
                    <Col span={11} offset={1}>
                       
                    <div className="box" id="box1" style={{width:'100%',height:400,border:'1px solid #ddd'}}></div>
                  <p style={{textAlign:'center'}}>  超市用户访问量</p>
                    </Col> 
                    <Col span={11} offset={1}>
                    <div className="box" id="box2" style={{width:'100%',height:400,border:'1px solid #ddd'}}></div>
                    <p style={{textAlign:'center'}}>  用户分布分数</p>
                    </Col> 
                </Row>
            </div>
        )
    }
}
